写html标签
<template>
  <div>
      <p>这是我的第一个组件</p>
      <p class="rank">第{{rank}}名</p>
      <p class="name">{{name}}</p>
      <p class="artist">{{artist}}</p>
      <!--readonly只读-->
      <van-rate v-model="rate" readonly />
  </div>
</template>

写js
<script>
export default {
    props: ['name', 'artist', 'rank', 'rate'],
    data() {
        return {
           
        }
    }
}
</script>

写样式
<style>
    .hello {
        color: red;
    }
</style>